<template>
  <div id="public">
    <!--搜索 npm run build:prod --report-->
    <div class="search-content"> 
      <!-- <el-date-picker
        v-model="dateTimeRange"
        type="datetimerange"
        range-separator="至"
        clearable
        value-format="yyyy-MM-dd HH:mm:ss"
        @change="inquiryList"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker> -->
      <el-date-picker
        v-model="dateTimeRange[0]"
        type="datetime"
        clearable
        value-format="yyyy-MM-dd HH:mm:ss"
        placeholder="开始日期">
      </el-date-picker>
       <el-date-picker
        v-model="dateTimeRange[1]"
        type="datetime"
        clearable
        value-format="yyyy-MM-dd HH:mm:ss"
        placeholder="结束日期">
      </el-date-picker>
      <el-button type="primary" icon="el-icon-search" @click="inquiryList">查询</el-button>
    </div>
    <div style='margin-left: 1.7vw;display:flex;'>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>消费提成</span>
          <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
        </div>
        <div class="text">
          <div class='item'>充值金币提成：{{count.rechargeCoins}}</div>
          <div class='item'>升级会员提成：{{count.upgradeMember}}</div>
          <div class='item'>礼物提成：{{count.receivingGifts}}</div>
          <div class='item'>金币升级会员提成：{{count.goldUpgradeMember}}</div>
          <div class='item'>金币上墙提成：{{count.goldUpperWall}}</div>
           <div class='item'>购买表情提成：{{count.buyingExpression}}</div>
          <div class='item'>总提成：{{count.total}}</div>
        </div>
      </el-card>
      <el-card class="box-card" style='margin-left: 30px;'>
        <div slot="header" class="clearfix">
          <span>推广链接</span>
          <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
        </div>
        <div class="text">
          <div class='item'>{{recommendUrl}}</div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
    import {Message} from 'element-ui';
  import request from "../../utils/request";
    export default {
        name: "goldChangeRecord",
      data(){
        return{
          // 查询
          recommendUrl:sessionStorage.getItem('recommendUrl'),
          dateTimeRange:[
            this.formatDateTime(new Date(new Date().getFullYear(), new Date().getMonth(), 1)),
            this.formatDateTime(new Date())],
          count:{
            rechargeCoins: 0,
            upgradeMember: 0,
            receivingGifts: 0,
            total: 0,
            goldUpperWall: 0,
            goldUpgradeMember: 0,
            buyingExpression: 0
          }
        }
      },
      mounted() {
        // var now = new Date(); //当前日期 
        // var nowMonth = now.getMonth(); //当前月 
        // var nowYear = now.getFullYear(); //当前年 
        // //本月的开始时间
        // var monthStartDate = new Date(nowYear, nowMonth, 1); 
        // //本月的结束时间
        // // var monthEndDate = new Date(nowYear, nowMonth+1, 0);
        // // var timeStar=Date.parse(monthStartDate)/1000;//s

        // this.dateTimeRange[0] = this.formatDateTime(monthStartDate);
        // this.dateTimeRange[1] = this.formatDateTime(now);
        // console.log(this.dateTimeRange)
        this.inquiryList();
      },
      methods:{
        isNotNull(value){
          return value !== null && value !== undefined && value !== "";
        },
        //查询列表
        inquiryList(){
          let that=this;
          that.tableData=[];
          let data={};
          if(this.isNotNull(that.dateTimeRange)){ //赠送时间
            if(!that.dateTimeRange[0] || !that.dateTimeRange[1]){
              Message.error('开始结束时间不能为空');
              return
            }
          }else{
            Message.error('开始结束时间不能为空');
            return
          }
          request({
            method: 'get',
            url: '/agent/recordOrder/total?start='+that.dateTimeRange[0]+'&end='+that.dateTimeRange[1],
            headers:{
              'Content-Type': 'application/json;charset=UTF-8'
            },
            // data:data
          }).then(function (res) {
            if(res.code===200){
              if(res.data){
                that.count=res.data;
              }else{
                that.count = {
                  rechargeCoins: 0,
                  upgradeMember: 0,
                  receivingGifts: 0,
                  total: 0,
                  goldUpperWall: 0,
                  goldUpgradeMember: 0,
                  buyingExpression: 0
                }
              }
              
            }
          }).catch(function (error) {
            console.log(error);
          });
        },
        formatDateTime(inputTime) {
          var date = new Date(inputTime);
          var y = date.getFullYear();
          var m = date.getMonth() + 1;
          m = m < 10 ? ('0' + m) : m;
          var d = date.getDate();
          d = d < 10 ? ('0' + d) : d;
          var h = date.getHours();
          h = h < 10 ? ('0' + h) : h;
          var minute = date.getMinutes();
          var second = date.getSeconds();
          minute = minute < 10 ? ('0' + minute) : minute;
          second = second < 10 ? ('0' + second) : second;
          return y + '-' + m + '-' + d+' '+h+':'+minute+':'+second;
        }
       
      }
    }
</script>

<style scoped src="../../assets/css/publicCss/publicStyle.css">

</style>
<style scoped>

  .text {
    font-size: 2vw;
    height: 55vh;
    /* display: flex;
    align-items: center; */
  }

  .item{
    margin-top: 4vh;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
    
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 40vw;
    
  }
</style>
